
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width , initial-scale=1 , shrink-to-fit=no"/>
    <title>本地安装Bootstrap</title>
    <!-- 外联Bootst基本样式 -->
    <link rel="stylesheet" type="text/css" href="bootstrap-4.5.0/dist/css/bootstrap.css"/>
    <!-- 外联自定义样式文件 -->

</head>
<body>
<div id="da_div" class="container">
    <table class="table border">
        <tr class="text-center">
            <td class="colspan-6 "> <strong>图书馆书名册</strong></td>
        </tr>
        <tr>
            <td>书名</td>
            <td>作者</td>
            <td>价格</td>
            <td>编号</td>
            <td>删除操作</td>
            <td>修改操作</td>
        </tr>
        <tr v-for="include in ku">
            <td>{{include.bn}}</td>
            <td>{{include.maker}}</td>
            <td>{{include.prices}}</td>
            <td>{{include.numb}}</td>
            <td>
                <input type="button" class="btn btn-info" value="删除" v-on:click="del(include.numb)"/>
            </td>
            <td>
                <input type="button" class="btn btn-info" value="修改" v-on:click="xiu_gai(include.bn,include.maker,include.prices,include.numb)"/>
            </td>
        </tr>
    </table>

    <p>添加操作：</p>
    <p>书名：<input type="text" v-model="bn" /></p>
    <p>作者：<input type="text" v-model="maker"/></p>
    <p>价格：<input type="text" v-model="prices"/></p>
    <p>编号：<input type="text" v-model="numb" v-bind:disabled="lock" /></p>
    <input type="button" class="btn btn-success" value="添加" v-show="add" v-on:click="injoin">
    <input type="button" class="btn btn-success" value="修改" v-show="change" v-on:click="que_ren_xiu_gai">


</div>
</div>

<script src="js/vue.js"  type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var a=new Vue({
        el:'#da_div',
        data:{
            bn:'',
            maker:'',
            prices:'',
            numb:'',
            add:true,
            change:false,
            lock:null,
            ku: [
                {
                    bn:'被讨厌的勇气',
                    maker:'美国XXX',
                    prices:'26.5',
                    numb:1,
                },
                {
                    bn:'被讨厌的勇气',
                    maker:'美国XXX',
                    prices:'26.5',
                    numb:2,
                },
                {
                    bn:'被讨厌的勇气',
                    maker:'美国XXX',
                    prices:'26.5',
                    numb:3,
                },
                {
                    bn:'被讨厌的勇气',
                    maker:'美国XXX',
                    prices:'26.5',
                    numb:4,
                },

            ]
        },
        methods: {
            del: function (numb) {
                for (var i = 0; i < this.ku.length; i++) {
                    if (this.ku[i].numb === numb) {
                        this.ku.splice(i, 1);
                    }
                }
            },


            injoin: function () {
                var xin_shu={};
                xin_shu.bn=this.bn;
                xin_shu.maker=this.maker;
                xin_shu.prices=this.prices;
                xin_shu.numb=this.numb;
                this.ku.push(xin_shu);

                this.bn = "";
                this.maker = "";
                this.prices = "";
                this.numb = "";
                this.lock=null;

            },
            xiu_gai: function (bn,maker,prices,numb) {
                 this.bn=bn;
                 this.maker=maker;
                 this.prices=prices;
                 this.numb=numb;
                this.lock="disabled";

                this.add = !this.add;
                this.change = !this.change;

            },
            que_ren_xiu_gai: function () {
                for (var i = 0; i < this.ku.length; i++) {
                    if (this.numb=== this.ku[i].numb) {
                        this.ku[i].bn=this.bn;
                        this.ku[i].maker=this.maker;
                        this.ku[i].prices=this.prices;
                        this.ku[i].numb=this.numb;
                    }
                }
                this.bn = "";
                this.maker = "";
                this.prices = "";
                this.numb = "";
                this.lock=null;
                this.add=!this.add;
                this.change=!this.change;
            }


        }
    })

</script>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- Bootstrap插件依赖文件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
<!-- jQuery插件 -->
<script src="bootstrap-4.5.0/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>